/* Navigation 组件样式 - 适配小程序环境 */

.navigation-container {
  min-height: 100vh;
  background-color: #f9fafb;
}

.navigation-header {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e5e7eb;
}

.navigation-content {
  padding: 48rpx 32rpx;
}

.navigation-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 16rpx;
  display: block;
}

.navigation-subtitle {
  font-size: 32rpx;
  color: #6b7280;
  margin-bottom: 48rpx;
  display: block;
}

/* 网格布局 */
.navigation-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24rpx;
  margin-bottom: 64rpx;
}

/* 响应式网格 */
@media (min-width: 768rpx) {
  .navigation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024rpx) {
  .navigation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280rpx) {
  .navigation-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 导航项样式 */
.navigation-item {
  display: block;
  padding: 32rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;

  &:active {
    border-color: #22c55e;
    box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.15);
    transform: translateY(-2rpx);
  }
}

.navigation-item-content {
  display: flex;
  flex-direction: column;
}

.navigation-item-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8rpx;
  display: block;
  transition: color 0.2s ease;
}

.navigation-item-subtitle {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
  transition: color 0.2s ease;
}

/* 激活状态下的文字颜色 */
.navigation-item:active .navigation-item-title {
  color: #22c55e;
}

.navigation-item:active .navigation-item-subtitle {
  color: #16a34a;
}

/* 项目信息卡片 */
.navigation-info {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.info-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #166534;
  margin-bottom: 16rpx;
  display: block;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-item {
  font-size: 28rpx;
  color: #15803d;
  line-height: 1.5;
  display: block;
}

/* 小屏幕适配 */
@media (max-width: 750rpx) {
  .navigation-content {
    padding: 32rpx 24rpx;
  }

  .navigation-title {
    font-size: 40rpx;
  }

  .navigation-subtitle {
    font-size: 28rpx;
  }

  .navigation-item {
    padding: 24rpx;
  }

  .navigation-item-title {
    font-size: 28rpx;
  }

  .navigation-item-subtitle {
    font-size: 22rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .navigation-container {
    background-color: #111827;
  }

  .navigation-header {
    background-color: #1f2937;
    border-bottom-color: #374151;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
  }

  .navigation-title {
    color: #f9fafb;
  }

  .navigation-subtitle {
    color: #d1d5db;
  }

  .navigation-item {
    background-color: #1f2937;
    border-color: #374151;

    &:active {
      border-color: #22c55e;
      background-color: #374151;
    }
  }

  .navigation-item-title {
    color: #f9fafb;
  }

  .navigation-item-subtitle {
    color: #d1d5db;
  }

  .navigation-info {
    background-color: #064e3b !important;
    border-color: #065f46 !important;
  }

  .info-title {
    color: #a7f3d0;
  }

  .info-item {
    color: #6ee7b7;
  }
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navigation-item {
  animation: fadeIn 0.3s ease-out;
}

/* 为每个项目添加延迟动画 */
.navigation-item:nth-child(1) { animation-delay: 0.1s; }
.navigation-item:nth-child(2) { animation-delay: 0.2s; }
.navigation-item:nth-child(3) { animation-delay: 0.3s; }
.navigation-item:nth-child(4) { animation-delay: 0.4s; }
.navigation-item:nth-child(5) { animation-delay: 0.5s; }
.navigation-item:nth-child(6) { animation-delay: 0.6s; }
